
@maxWidth768: (max-width: 768px);
@minWidth768: (min-width: 768px);

@mainColor:#e1eff9;

.show{display: block!important;}
.show-inline{display: inline-block!important;}
.line-vertical-middle{display: inline-block;vertical-align: middle;}
.line-text-ellipsis{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.def-text{color: #989898;}

// emoji
.emoji-icon{width: 25px;height: 25px;}
svg.icon{display: inline-block;vertical-align: middle;}
.svg-icon{width: 25px;height: 25px;}

.hideShow{transition: all 0.2s ease-in-out;}

.im-page{position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;}

/* ******* im-main start ******* */
.im-main{
	transition: all 0.3s;

	*{padding: 0px;margin: 0px;border: 0px;font-size: 12px;font-family: "SF Pro SC","HanHei SC","SF Pro Text","Myriad Set Pro","SF Pro Icons","PingFang SC","Helvetica Neue","Helvetica","Arial",sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
	*:active{}
	input,textarea,.textarea{-webkit-appearance: none;outline: none;}
	display: block;height: 80%;top: 10%;width: 800px;left: calc(~"50% - 400px");position: absolute;border-radius: 10px;box-shadow: 0px 0px 10px @mainColor;background-color: @mainColor;overflow: hidden;
	font-size: 0px;
	@media @minWidth768{
		max-height: 500px;
	}
	@media screen and @maxWidth768{
		width: 100%;left: 0px;height: 100%;top: 0px;z-index: 99;
	}
	display: none;

	&.sm_main{
		position:fixed;bottom:5px;top: unset;width: 200px;height: auto;left: calc(50% - 100px);
		.im-main-chat-left-list{display: none;}
		.im-main-chat-content{
			width: 100%;
			.chat-main-top{
				.top-cont-ab{display: none;}
			}
			.chat-main-content{display: none;}
			.chat-main-bottom{display: none;}
		}
	}
}

// im-main-chat-left-list
.im-main-chat-left-list{
	.line-vertical-middle();
	position:relative;
	width: 23%;
	height: 100%;
	background-color:#d6d5d5;
	overflow-y: scroll;
	@media screen and @maxWidth768{
		display: none!important;
	}
	.list-cont{
		padding:5px;
		.rows{
			.hideShow();
			@avatar-margin:10px;
			position:relative;
			padding:5px 10px;font-size: 0px;
			padding-right:20px;
			cursor: pointer;
			.avatar{
				.line-vertical-middle();
				width: 35px;height: 35px;border-radius:40px;overflow: hidden;box-shadow:0px 0px 2px #000;
				img{width: 100%;}
			}
			.info{
				.line-vertical-middle();
				width: calc(~"100% - 40px - 0px" - @avatar-margin);
				margin-left:@avatar-margin;font-size: 10px;
				.info-top{
					.line-text-ellipsis();
					display: inline-block;max-width: calc(100% - 20px);
					span{
						font-size: 13px;
					}
				}
				.info-bottom{
					.line-text-ellipsis();
					span{
						font-size: 10px;
					}
				}
			}
			.close-btn{
				.hideShow();
				@w:18px;
				position:absolute;
				width: @w;
				height: @w;
				border-radius:@w;
				padding:5px;box-sizing:border-box;
				right: 8px;top: 14px;
				background-color:#3e3e3e;opacity: 0;
				&:hover{background-color:#7f2525;};
			}
			&:hover{
				background-color:#e2e2e2;
				.close-btn{opacity: 1;}
			}
			&.active{
				background-color:#e2e2e2;
			}
		}
	}
}

// im-main-chat-content
.im-main-chat-content{
	.line-vertical-middle();
	position:relative;
	width: 100%;
	height: 100%;
	@media @minWidth768{
		width: 77%;
	}
	@media @maxWidth768{
		width: 100%;
	}
	&.full{
		width: 100%;
	}

	/* chat-main-top start */
	.chat-main-top{
		padding:15px;
		position:relative;
		cursor: pointer;
		.top-cont{
			position: relative;
			font-size:0px;
			@avatar-margin:10px;
			.avatar{
				.line-vertical-middle();
				width: 40px;height: 40px;border-radius:40px;overflow: hidden;box-shadow:0px 0px 5px #000;
				img{width: 100%;}
			}
			.info{
				.line-vertical-middle();
				width: calc(~"100% - 40px - 0px" - @avatar-margin);
				margin-left:@avatar-margin;
				.info-top{
					.line-text-ellipsis();
					// text-shadow:0.5px 0.5px 10px #808080;
					span{font-size: 14px;}
				}
				.info-bottom{
					font-size: 12px;
					.line-text-ellipsis();
					margin-top: 1px;
					span{
						font-size: 10px;
					}
				}
			}
			.top-cont-ab{
				text-align: right;
				position:absolute;
				top: 0px;
				right: 0px;
				cursor: pointer;
				.btn{
					.line-vertical-middle();
					width: 10px;height: 10px;border-radius:10px;margin-left: 5px;overflow: hidden;padding:3px;
					&:hover{background-color: #fff;}
					@media screen and @maxWidth768{
						display: none;
					}
				}
			}
		}
	}
	/* chat-main-top end */


	/* chat-main-content start */
	.chat-main-content{
		position:relative;
		background-color:#fff;display: inline-block;height: calc(~"100% - 71px - 100px");width: 100%;overflow-y: scroll;box-sizing: border-box;padding:5px 15px;
		.content-msg-list{
			.msg-row{
				display: inline-block;
				font-size: 0px;
				margin:10px 0px;
				width: 100%;
				box-sizing:border-box;
				padding:0px 10px;
				.avatar{
					.line-vertical-middle();
					vertical-align: top;
					width: 30px;height: 30px;border-radius: 6px;overflow: hidden;box-shadow:1px 1px 5px #b7b5b5;
					img{width: 100%;}
				}
				.row-info{
					@bgc:#f7f7f7;
					.line-vertical-middle();
					vertical-align: top;
					margin-left: 15px;
					max-width: calc(~"100% - 2*30px - 30px");
					.contet{
						position: relative;padding: 5px 10px;background-color: @bgc;color: #000;border-radius: 10px;
						box-shadow:0px 0px 10px @mainColor;
						.arrow{
							position:absolute;left: -3px;top: 10px;
							width: 10px;height: 10px;background-color: @bgc;
							transform: rotate(45deg);
						}
					}

				}

				&.right{
					.avatar{float: right;}
					.row-info{
						@bgc:#ecf8f9;
						float: right;
						margin-left: 0px;margin-right: 15px;
						.contet{
							background-color: @bgc;
							.arrow{left: unset;right: -3px;background-color: @bgc;}
						}
					}
					
				}
			}

		}
	}
	/* chat-main-content end */


	/* chat-main-bottom start */
	.chat-main-bottom{
		position:relative;display: inline-block;width: 100%;height: 100px;margin-top: -5px;box-shadow:-1px 0px 10px @mainColor;
		background-color:#fff;
		@media screen and @maxWidth768{
			position:fixed;left: 0px;bottom:0px;
		}
		form{height: 100%;width: 100%;}
		.btn-list{
			position:relative;
			.btn{
				position:relative;
				.line-vertical-middle();
				height: calc(15px + 2*8px);width: calc(15px + 2*10px);cursor: pointer;
				padding:8px 10px;white-space: nowrap;overflow: hidden;box-sizing:border-box;
				&:hover{background-color: @mainColor;}
				&.active{background-color: @mainColor;}
				img{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;cursor: pointer;}

				form,input{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;opacity: 0;cursor: pointer;}
			}
			.right-btn{
				position:absolute;right: 10px;top: 5px;padding:5px 20px;background-color:#4762ad;color: #fff;border-radius:5px;
			}
		}
		.input-dom{
			height: calc(~"100% - 36px - 0px");
			padding-bottom: 5px;box-sizing:border-box;
			.textarea{width: 100%;height: 100%;padding: 5px 10px;display: inline-block;box-sizing: border-box;font-size: 13px;resize: none;}
		}

		.utils-emoji{
			position:absolute;top: -150px;left: 5px;width: 300px;height: 150px;overflow: hidden scroll;background-color:#fff;box-shadow:0px 0px 15px #757575;border-radius:5px;
			box-sizing:border-box;padding:10px;
			.emoji-icon{
				display: inline-block;vertical-align: middle;padding: 5px;cursor: pointer;
				&:hover{background-color: @mainColor;}
			}
		}
	}
	/* chat-main-bottom end */
}
/* ******* im-main end ******* */


/* ******* im-master start ******* */
.im-master{
	position:fixed;
	bottom:50px;
	right: 20px;
	
	.master-btn{
		@w:40px;
		display: none;
		background-color: @mainColor;
		cursor: pointer;
		width: @w;
		height: @w;
		border-radius:@w;
		background-color: @mainColor;
		box-shadow: 3px 3px 10px #999;
		padding: 5px;
		box-sizing:border-box;
		transition: all 0.3s;
		&:hover{box-shadow: 3px 3px 8px #609ae2;background-color: #e1f1f9;}
		@media screen and @maxWidth768{
			display: none!important;
		}
	}
	
	.master-content{
		display: none;
		width: 250px;
		border-radius:5px;
		overflow: hidden;
		box-shadow:5px 5px 10px #999;
		@media screen and @maxWidth768{
			display: block;
			position:fixed;left: 0px;top: 0px;
			width: 100%;height: 100%;
		}
		.bj{background-color:@mainColor;};

		.master-content-top{
			.bj();
			padding:15px;
			position:relative;
			.top-cont{
				position: relative;
				font-size:0px;
				@avatar-margin:10px;
				.avatar{
					.line-vertical-middle();
					width: 40px;height: 40px;border-radius:40px;overflow: hidden;box-shadow:0px 0px 5px #000;
					img{width: 100%;}
				}
				.info{
					.line-vertical-middle();
					width: calc(~"100% - 40px - 0px" - @avatar-margin);
					margin-left:@avatar-margin;
					.info-top{
						.line-text-ellipsis();
						text-shadow:0.5px 0.5px 10px #808080;
						span{font-size: 14px;}
					}
					.info-bottom{
						font-size: 12px;
						.line-text-ellipsis();
						margin-top: 1px;
						span{
							font-size: 10px;
						}
					}
				}
				.top-cont-ab{
					@media @maxWidth768{
						display: none;
					}
					text-align: right;
					position:absolute;
					top: 0px;
					right: 0px;
					cursor: pointer;
					.btn{
						.line-vertical-middle();
						width: 10px;height: 10px;border-radius:10px;margin-left: 5px;overflow: hidden;padding:3px;
						&:hover{background-color: #fff;}
						
					}
				}
			}
		}

		.master-content-navs{
			font-size: 0px;
			box-shadow:5px 0px 5px #333;
			.row{
				.bj();
				border-bottom{}
				.line-vertical-middle();
				border-bottom:2px solid @mainColor;
				cursor: pointer;
				width: calc(100%/3);
				text-align: center;
				padding:5px;
				box-sizing:border-box;
				&.active{background-color: #bbdaf5;border-color: #00adff;}
				&:hover{background-color: #c8e8ff;border-color: #00adff;}
				img{width: 20px;height: 20px;}
			}
		}

		.master-content-list{
			height: 350px;
			background-color:#fff;
			padding:10px;
			box-sizing:border-box;
			overflow: scroll;
			display: inline-block;
		    box-sizing: border-box;
		    width: 100%;
			.list-item{
				cursor: pointer;
				-webkit-tap-highlight-color: transparent;
				.item-title{
					cursor: pointer;
					.more-icon{
						.line-vertical-middle();
						width: 8px;margin-top: 5px;
					}
					.cont{
						.line-vertical-middle();
						width: calc(90% - 8px);
						span{.line-vertical-middle();}
						.value{
							font-size: 13px;
							.line-text-ellipsis();
							max-width: calc(60%);
							display: inline-block;
						}
						.tips{font-size: 10px;color: #b3b3b3;margin-left: 5px;}
					}
				}
				.item-rows{
					display: none;
					.row{
						padding:10px;
						position:relative;
						.top-cont{
							position: relative;
							font-size:0px;
							@avatar-margin:10px;
							.avatar{
								.line-vertical-middle();
								@w:35px;
								width: @w;height: @w;border-radius:@w;overflow: hidden;box-shadow:0px 0px 3px #000;
								img{width: 100%;}
								&.square{border-radius: 5px;}
							}
							.info{
								.line-vertical-middle();
								width: calc(~"100% - 40px - 0px" - @avatar-margin);
								margin-left:@avatar-margin;
								font-size: 0px;
								.info-top{
									.line-text-ellipsis();
									span{font-size: 13px;}
								}
								.info-bottom{
									font-size: 12px;
									.line-text-ellipsis();
									margin-top: 1px;
									span{
										font-size: 10px;
									}
								}
							}
						}

						&:hover{
							background-color: #f7f7f7;
    						box-shadow: 1px 1px 10px #f5f4f4;
						}
					}
				}
				&.active{
					.more-icon{
						transform:rotate(90deg);
						-ms-transform:rotate(90deg);
						-moz-transform:rotate(90deg);
						-webkit-transform:rotate(90deg);
						-o-transform:rotate(90deg);
					}
					.item-rows{
						display: block;
					}
				}
			}
		}

	}
}
/* ******* im-master end ******* */
